<script setup>
import {reactive, ref} from "vue";
import temblorBeonduty from "@/api/temblor/temblorBeonduty.js";

const userList = ref([])
const formData = reactive({
  userId: 0,
  rangeDate: ''
})
const workDay = ref(0)
const holidayDay = ref(0)
const changeUser = (user) => {
  formData.userId = user[0]
}

const onChange = (value) => {
  formData.rangeDate = value
}
const query = async () => {
  const res = await temblorBeonduty.statistics({
    userId: formData.userId,
    rangeDate: formData.rangeDate
  })
  workDay.value = res.data[0]
  holidayDay.value = res.data[1]
}
</script>

<template>
  <a-card>
    <a-space>
      <ma-user @change-user="changeUser" v-model="userList" :isEcho="true" :multiple="false"/>
      <a-range-picker
          class="mt-5"
          @change="onChange"
          @select="onSelect"
          style="width: 254px; marginBottom: 20px;"
      />
      <a-button type="primary" @click="query">查询</a-button>
    </a-space>
    <a-layout class="mt-5">
      <a-space size="large">
        <a-statistic title="工作日（天）" :value="workDay" show-group-separator/>
        <a-statistic extra="节假日（天）" :value="holidayDay" :precision="2"/>
      </a-space>
    </a-layout>
  </a-card>

</template>

<style scoped>

</style>